<template>
    <page>
        <ul class="tab h50 tc white-bg text3" flex="box:mean">
            <li v-for="(i, index) in ['未使用', '已使用', '已过期']"
                :class="{'active c1': currentIndex == index}"
                @click="currentIndex = index">{{i}}
            </li>
        </ul>
        <div class="wrap">
            <component v-for="(item, index) in tabComponents" :is="item" :key="index" v-if="currentIndex == index"></component>
        </div>
    </page>
</template>
<script>
  import Wsy from './_未使用'
  import Ysy from './_已使用'
  import Ygq from './_已过期'

  export default {
    data () {
      return {
        couponId: null,
        giftCode: '',
        show: false,
        currentIndex: 0,
        tabComponents: [Wsy, Ysy, Ygq]
      }
    },
    created () {
      console.log('created')
    },
    computed: {
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .active {
        border-bottom: 2px solid;
    }

    .wrap {
        position: absolute;
        top: 50px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
</style>
